<template>
    <div>
        <button @click="deepCopyRecursive">递归深拷贝</button>
        <p>原对象: {{ originalObject }}</p>
        <p>递归深拷贝对象: {{ deepCopiedObjectRecursive }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                originalObject: {
                    name: 'John',
                    hobbies: ['reading', 'swimming']
                },
                deepCopiedObjectRecursive: {}
            };
        },
        methods: {
            deepCopyRecursive() {
                this.deepCopiedObjectRecursive = this.deepClone(this.originalObject);
                // 修改原对象的引用类型属性
                this.originalObject.hobbies.push('running');
            },
            deepClone(obj) {
                if (typeof obj !== 'object' || obj === null) {
                    return obj;
                }
                let clone;
                if (Array.isArray(obj)) {
                    clone = [];
                    for (let i = 0; i < obj.length; i++) {
                        clone[i] = this.deepClone(obj[i]);
                    }
                } else {
                    clone = {};
                    for (let key in obj) {
                        if (obj.hasOwnProperty(key)) {
                            clone[key] = this.deepClone(obj[key]);
                        }
                    }
                }
                return clone;
            }
        }
    };
</script>